var atid = location.search.slice(1);
var tatolData = JSON.parse(localStorage.getItem('cookies'));
for (var i = 0; i < tatolData.length; i++) {
    if (Number(atid) == Number(tatolData[i].goodid)) {
        var targetData = tatolData[i];
    };
};
var strtit = `<span>${targetData.Hometitle}</span>`;
$(strtit).appendTo('.conNavMain');
var details = `  <!-- 左边 -->
            <div class="preview fl">
                <!-- 大图片 -->
                <div class="galleryWarp">
                    <a href="javascript:void(0)">
                        <img src="${targetData.Details.DetailsURL[0]}" alt="" class="minImg">
                        <div class="MagicZoomPlusHint"></div>
                    </a>
                </div>
                <!-- 切换小图片 -->
                <div class="spceList">
                    <a href="javascript:void(0)" class="spcePrev"><i class="iconfont icon-zuojiantou"></i></a>
                    <div class="spceItems">
                        <ul>
                            <li>
                                <a href="javascript:void(0)" class="MagicThumbSwap imgRim"><img src="${targetData.Details.DetailsURL[0]}" alt=""></a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="MagicThumbSwap"><img src="${targetData.Details.DetailsURL[1]}" alt=""></a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="MagicThumbSwap"><img src="${targetData.Details.DetailsURL[2]}" alt=""></a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="MagicThumbSwap"><img src="${targetData.Details.DetailsURL[3]}" alt=""></a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="MagicThumbSwap"><img src="${targetData.Details.DetailsURL[4]}" alt=""></a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" class="MagicThumbSwap"><img src="${targetData.Details.DetailsURL[5]}" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <a href="javascript:void(0)" class="spceNext"><i class="iconfont icon-right"></i></a>
                </div>
                <!-- 对比 收藏 举报 -->
                <div class="shortShare">
                    <div class="btnLeft">
                        <div class="duiBi">
                            <a href="javascript:void(0)">
                                <input type="checkbox" name="" id="633" class="uiCheckbox">
                                <label for="633" class="uiLabel">对比</label>
                            </a>
                        </div>
                        <a href="javascript:void(0)" class="collection">
                            <i class="iconfont icon-shoucang"></i><em>收藏(<span>0</span>)</em>
                        </a>
                        <a href="" class="fr report">
                            <em>举报</em>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 中间 -->
            <div class="containerMedi">
                <form action="" method="post">
                    <div class="name">${targetData.Hometitle}</div>
                    <div class="summary">
                        <div class="summaryPrice">
                            <div class="summaryPriceWrap">
                                <div class="summaryItem">
                                    <div class="siTit">商 城 价</div>
                                    <div class="siWarp">
                                        <strong class="shopPrice">￥${targetData.Homeprice}</strong>
                                        <span class="priceNotify">降价通知</span>
                                    </div>
                                </div>
                                <div class="summaryItem">
                                    <div class="siWarp vip">
                                        <i class="icon"></i>
                                        <span>高级VIP可享超值优惠价</span>
                                        <span class="cred">￥${targetData.Homeprice}</span>
                                        <span class="onVipRegister">立即开通 >></span>
                                    </div>
                                </div>
                                <div class="summaryItem">
                                    <div class="siTit">市 场 价</div>
                                    <div class="siWarp">
                                        <div class="mPrice c555">￥${targetData.HomeZKprice}</div>
                                    </div>
                                </div>
                                <div class="summaryItem">
                                    <div class="siTit">领卷</div>
                                    <div class="siWarp">
                                        <a href="" class="openTb">
                                            <div class="quanItem">
                                                <i class="iLeft"></i>满100减2<i class="iRight"></i>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="siInfo">
                                    <div class="siCumulative">累计评价<em>${targetData.Details.evaluation}</em></div>
                                    <div class="siCumulative">累计销量<em>${targetData.Details.Volume}</em></div>
                                </div>
                                <div class="siPhoneCode">
                                    <div class="qrcodeWard">
                                        <div class="qrcodeTit">手机购买<i class="iconfont icon-erweima1 f14"></i></div>
                                        <div class="qrcodePop">
                                            <div class="mobileQrcode">
                                                <img src="https://x.dscmall.cn/storage/images/weixin_img/weixin_code_633.png?v=daGLbqLKKcFp5fIEjVfhrA27cc7Yqh6N" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="summaryBasic">
                                <div class="summaryItem isStock">
                                    <div class="siTit">配送</div>
                                    <div class="siWarp">
                                        <span class="initialArea c555">上海市</span>
                                        <span class="c555">至</span>
                                        <div class="storeSelector" style="width: 217px; height: 25px; position: relative;">
                                            <input readonly type="text" data-toggle="city-picker" placeholder="点击从下拉面板中选择省/市/区县/镇">
                                        </div>
                                        <div class="storeWarehouse">
                                            <div class="storePrompt"><strong>有货</strong>，下单后立即发货</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="summaryItem isService">
                                    <div class="siTit">服务</div>
                                    <div class="siWarp">
                                        <div class="fl">
                                            <a href="javascript:void(0)" class="cb31919">${targetData.Details.brand}</a> 发货并提供售后服务
                                        </div>
                                        <div class="fl pl10">
                                            <span class="c8c">[ 免运费 ]</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="summaryItem isBrand">
                                    <div class="siTit">品牌</div>
                                    <div class="siWarp">
                                        <a href="" class="c555">喜瑞</a>
                                    </div>
                                </div>
                                <div class="summaryItem isIntegral">
                                    <div class="siTit">可用积分</div>
                                    <div class="siWarp"><span class="integral">${targetData.Details.goods}</span></div>
                                </div>
                                <div class="summaryItem isNumber">
                                    <div class="siTit">数量</div>
                                    <div class="siWarp">
                                        <div class="amountWarp fl">
                                            <input class="text buyNum" ectype="quantity" value="1" name="number" defaultnumber="1" style="width: 28px;">
                                            <div class="abtn">
                                                <a href="javascript:void(0)" class="btnAdd">
                                                    <i class="iconfont icon-xialajiantou1"></i>
                                                </a>
                                                <a href="javascript:void(0)" class="btnReduce">
                                                    <i class="iconfont icon-down"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <span>库存 <em>${targetData.Details.Stock}</em> 件</span>
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="summaryBasic">
                                <div class="summaryItem isService mb20">
                                    <div class="siTit">温馨提示</div>
                                    <div class="siWarp">
                                        <a href="javascript:void(0);" class="labelWarp labelUrl cauto c555">
                                            <img src="https://x.dscmall.cn/storage/data/goods/services_label/%E6%AD%A3%E7%A1%AE2.png" alt=""> 支持7天无理由退货1
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chooseBtns  ml160 clearfix">
                        <a href="javascript:void(0)" class="btnBuynow">立即购买</a>
                        <a href="javascript:void(0)" class="btnAppend" data-id="${atid}">
                            <i class="iconfont icon-carts"></i> 加入购物车
                        </a>
                    </div>
                </form>
            </div>`;
$(details).prependTo('#datas-into');
var magData = ` <img src="${targetData.Details.DetailsURL[0]}" alt="" class="MagicZoomBigImageContimg">`;
$(magData).appendTo('.MagicZoomBigImageCont');


$('.menuDrop').mousemove(function() {
    $(this).addClass('menuDropOpen');
});
$('.menuDrop').mouseout(function() {
    $('.menuDrop').removeClass('menuDropOpen');
});
$('.galleryWarp').mouseover(function() {
    $('.MagicZoomPlusHint').stop().fadeIn(500);
    $('.MagicZoomBigImageCont').stop().fadeIn(500);
    $('.galleryWarp').mousemove(function(e) {
        var mbX = e.pageX - $('.galleryWarp').offset().left - $('.MagicZoomPlusHint').width() / 2;
        var mbY = e.pageY - $('.galleryWarp').offset().top - $('.MagicZoomPlusHint').height() / 2;
        var xyd = $('.galleryWarp').width() - $('.MagicZoomPlusHint').width();
        var yyd = $('.galleryWarp').height() - $('.MagicZoomPlusHint').height();
        if (mbX > xyd) {
            mbX = xyd;
        } else if (mbX < 0) {
            mbX = 0;
        };
        if (mbY > yyd) {
            mbY = yyd;
        } else if (mbY < 0) {
            mbY = 0;
        };
        $('.MagicZoomPlusHint').css({
            'top': mbY + 'px',
            'left': mbX + 'px',
        });
        var biliX = mbX / xyd;
        var biliY = mbY / yyd;
        var dtX = biliX * ($('.MagicZoomBigImageCont').width() - $('.MagicZoomBigImageContimg').width());
        var dtY = biliY * (Number($('.MagicZoomBigImageCont').height()) - Number($('.MagicZoomBigImageContimg').height()));
        $('.MagicZoomBigImageContimg').css({
            'top': dtY + 'px',
            'left': dtX + 'px',
        });
    });
});
$('.galleryWarp').mouseout(function() {
    $('.MagicZoomPlusHint').stop().fadeOut(500);
    $('.MagicZoomBigImageCont').stop().fadeOut(500);
});
$('.MagicThumbSwap').mouseover(function() {
    $(this).addClass('imgRim').parent().siblings().find('.MagicThumbSwap').removeClass('imgRim');
    var tplj = $(this).children('img').attr('src');
    $(".minImg").attr("src", tplj);
    $(".MagicZoomBigImageContimg").attr("src", tplj);
});


if ($('.spceItems ul').width() <= 320) {
    $('.spceNext').css('color', '#d1cccc');
    $('.spcePrev').css('color', '#d1cccc');
} else {
    var uleft = Number($(".spceItems ul").position().left);
    $('.spcePrev').click(function() {
        if (uleft >= 0) {
            $(".spcePrev").attr("disabled", true).css("pointer-events", "none");
        } else {
            $(".spceNext").attr("disabled", false).css("pointer-events", "auto");
            uleft += 65;
            $(".spceItems ul").stop().animate({
                left: "+=" + 65
            });
        };
    });
    $('.spceNext').click(function() {
        if (uleft <= -65) {
            $(".spceNext").attr("disabled", true).css("pointer-events", "none");
        } else {
            uleft -= 65;
            $(".spcePrev").attr("disabled", false).css("pointer-events", "auto");
            $(".spceItems ul").stop().animate({
                left: "-=" + 65
            });
        };
    });
};

function xdata(sta, len) {
    var data = HomePage.carousel;
    var str = '';
    for (var i = sta; i < len; i++) {
        str += `
        <li>
            <div class="pImg">
                <a href="">
                    <img src="${data[i].pictureURL}" alt="">
                </a>
            </div>
            <div class="pName">
                <a href="" class="dian1 c555">${data[i].Hometitle}</a>
            </div>
            <div class="price pPrice">￥${data[i].HomeZKprice}</div>
        </li>
        `;
    };
    return str;
};
$(xdata(6, 11)).appendTo('.read');
$(xdata(5, 15)).appendTo('.newon');
$(xdata(15, 25)).appendTo('.hotSell');
$(xdata(18, 28)).appendTo('.recommend');
$(xdata(13, 18)).appendTo('#whoLike');

var uTop = Number($(".read").position().top);
$('.spriteUp').click(function() {
    if (uTop >= 0) {
        $(".spriteUp").attr("disabled", true).css("pointer-events", "none");
    } else {
        $(".spritedown").attr("disabled", false).css("pointer-events", "auto");
        uTop += 180;
        $(".read").stop().animate({
            top: "+=" + 180
        });
    };
});
$('.spritedown').click(function() {
    if (uTop <= -360) {
        $(".spritedown").attr("disabled", true).css("pointer-events", "none");
    } else {
        uTop -= 180;
        $(".spriteUp").attr("disabled", false).css("pointer-events", "auto");
        $(".read").stop().animate({
            top: "-=" + 180
        });
    };
});

$('.mcTab li').click(function() {
    var index = $(this).index();
    $(this).addClass('curr').siblings().removeClass('curr');
    $($('.recommendNewGoods')[index]).css('display', 'block').siblings().css('display', 'none');
});

$(window).scroll(function() {
    if ($(this).scrollTop() > 800) {
        $('.inFixed').addClass('detailFixed');
        $('.inFixed').find('.mc').css('display', 'none');
        $('.gmTabbox').addClass('detailFixed');
        $('.gmtabqpBort').css('display', 'block');
    } else {
        $('.inFixed').removeClass('detailFixed');
        $('.inFixed').find('.mc').css('display', 'block');
        $('.gmTabbox').removeClass('detailFixed');
        $('.gmtabqpBort').css('display', 'none');
    };
});

$('.gmTab').children().click(function() {
    $("html").stop().animate({ scrollTop: '800' }, 500);
    $(this).addClass('curr').siblings().removeClass('curr');
    if ($(this).index() == 0) {
        $('.gmfDetail').css('display', 'block');
        $('.gmfComment').css('display', 'none');
    };
    if ($(this).index() == 1) {
        $('.gmfDetail').css('display', 'none');
        $('.gmfComment').css('display', 'block');
    };
    if ($(this).index() == 2) {
        $('.gmfDetail').css('display', 'none');
        $('.gmfComment').css('display', 'none');
    };
});

$('.inner').click(function() {
    $('.tbPopsku').addClass('db');
});
$('.czbtnFalse').click(function(e) {
    $('.tbPopsku').removeClass('db');
    event.stopPropagation();
});

function price(tem) {
    return $('.buyNum').val(tem);
};
var tem = $('.buyNum').val();
$('.btnAdd').click(function() {
    tem++;
    $(this).parents('.amountWarp ').find('.buyNum').val(tem);
    price(tem);
});

$('.btnReduce').click(function() {
    tem--;
    if (tem < 1) {
        tem = 1;
        $('.pbMask').addClass('db');
        $('.pb').addClass('db');
    };
    $(this).parents('.amountWarp ').find('.buyNum').val(tem);
    price(tem);
});
$('.pb-x').on('click', function() {
    $('.pbMask').removeClass('db');
    $('.pb').removeClass('db');
    $('.tbPopsku').removeClass('db');
});


//购物车数据加入本地
$('.btnAppend').click(function() {
    var item = JSON.stringify([HomePage.carousel[atid]]);
    if (localStorage.getItem('shoppingCart')) {
        var tempSet = JSON.parse(localStorage.getItem('shoppingCart'));
        console.log(tempSet);
        // if
        tempSet.push(HomePage.carousel[atid]);
        localStorage.setItem('shoppingCart', JSON.stringify(tempSet));
    } else {
        localStorage.setItem('shoppingCart', item);
    };
});

// 删除键的隐藏出现
$('.aside-dis .adis-con ul li').hover(function() {
        $(this).find('.del').css('display', 'block')
    }, function() {
        $(this).find('.del').css('display', 'none')
    })
    // 点击删除当前商品
$('.aside-dis .adis-con ul li').on('click', '.del', function() {
    $(this).parents('li').remove()
    totale()
    if ($('.aside-dis .adis-con ul li').length == 0) {
        var carts = ` <div class="con-center">
            <img src="../images/cart-nogoods.png" alt="">
            <p>购物车空空的，赶快去挑选心仪的商品吧~</p>
            <p><a href="" style="color: red;"> 去首页看看</a></p>
        </div>`;
        $('.adis-con').html(carts);
    }
})


// 渲染数据到侧栏购物车
function shopping() {
    var carts = '';
    var carsData = JSON.parse(localStorage.getItem('shoppingCart'));

    if (carsData == null || carsData.length == 0) {
        carts = ` <div class="con-center">
                    <img src="../images/cart-nogoods.png" alt="">
                    <p>购物车空空的，赶快去挑选心仪的商品吧~</p>
                    <p><a href="" style="color: red;"> 去首页看看</a></p>
            </div>`;
        $('.adis-con').html(carts);

    } else {
        var temp = '';
        var a = `<ul></ul>`
        for (var i = 0; i < carsData.length; i++) {
            temp += `<li style="height:87px">
                    <div class="con-l">
                        <a href="">
                            <img src="${carsData[i].pictureURL}" alt="">
                        </a>
                    </div>
                    <div class="con-r">
                        <a href="">${carsData[i].Hometitle}</a>
                        <p>${carsData[i].Homeprice}</p>
                        <div class="con-num">
                            <span class="jian">-</span>
                            <span class="shop-num">1</span>
                            <span class="add">+</span>
                        </div>
                    </div>
                </li> `
        };

        $('.adis-con').one().html(a);
        $('.adis-con ul').append(temp);
    }
};
shopping();
$('.btnAppend').click(function() {
    shopping();
    // totale()
    $('.shop-num').text($('.buyNum').val());
});

function totale() {
    // 商品总数
    var shu = 0;
    // 商品总价
    var pric = 0;

    $('.aside-dis .adis-con ul li').each(function(index, value) {
        shu += Number($(this).find('.shop-num').text())
        pric += Number($(this).find('.shop-num').text()) * Number($(this).find('p').text())
            // console.log( Number($(this).find('p').text()))
    });
    // console.log(shu);

    $('.aside-dis .adis-bot p span').text(shu)
    $('.aside-dis .adis-bot h4').text(pric)

    $('.aside .aside-shop span').text(shu)
}
totale()


$('.aside-dis .adis-con ul li').on('click', '.add', function() {
    var sun = Number($(this).prev().text())
    sun++;
    $(this).prev().text(sun)
    totale()
})
$('.aside-dis .adis-con ul li').on('click', '.jian', function() {
    var sun = Number($(this).next().text())
    sun--;
    if (sun <= 0) {
        $(this).parents('li').remove()

    }
    $(this).next().text(sun)
    totale()
        // shopping();
    if ($('.aside-dis .adis-con ul li').length == 0) {
        var carts = ` <div class="con-center">
            <img src="../images/cart-nogoods.png" alt="">
            <p>购物车空空的，赶快去挑选心仪的商品吧~</p>
            <p><a href="" style="color: red;"> 去首页看看</a></p>
        </div>`;
        $('.adis-con').html(carts);
    }
})